<template>
	<h3>ActionDemo</h3>
	<p>count:{{ count }}</p>
	<button @click="$store.dispatch('increment')">dispatch action</button>
	<button
		@click="
			// 以对象形式分发
			$store.dispatch({
				type: 'incrementAsync',
				amount: 10,
			})
		"
	>
		dispatchAsyncAction
	</button>
	<hr />
	<p>cart:{{ cart }}</p>
	<p>checkedProducts:{{ checkedProducts }}</p>
	<button @click="checkout">checkout</button>
	<button @click="buyProducts({ products: checkedProducts })">
		buyProducts
	</button>
	<hr />
	<p>data:{{ data }}</p>
	<p>otherData:{{ otherData }}</p>
	<button @click="doAjax">doAjax</button>
</template>

<script>
	import { mapState, mapGetters, mapActions } from "vuex";
	export default {
		computed: {
			...mapState(["count", "cart", "data", "otherData"]),
			...mapGetters(["checkedProducts"]),
		},
		methods: {
			// checkout() {
			// 	this.$store.dispatch({
			// 		type: "checkout",
			// 		products: this.checkedProducts,
			// 	});
			// },
			...mapActions(["checkout"]),
			...mapActions({
				buyProducts: "checkout",
				ajax: "actionB",
			}),
			doAjax() {
				try {
					this.ajax();
				} catch (err) {
					console.error("err=", err);
				}
			},
		},
	};
</script>

<style>
</style>